<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig=breadcrumbConfig></breadcrumb>
    <!--    <breadcrumb></breadcrumb>-->
    <!-- 面包屑导航 -->
    <div class="content">
      <h2>售后订单</h2>
      <h3>数据筛选</h3>
      <form-filed class="search-form" :formconfig="searchFormConfig.formconfig" :formData="searchFormConfig.formData"
                  @formDataval="dialogClick" ref="formAttr"/>
    </div>
    <div class="content">
      <h3>列表数据</h3>
      <orders-list-table v-loading="loading" :dataList="page.list" :heightStr='columns.height' :config="columns.config" :typeStr='columns.type'></orders-list-table>
      <!-- 分页start -->
      <div class="page" v-if="page.totalNum >= 8">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <!--========================== el-dialog =================================-->
<!--      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">-->
<!--        <el-table :data="gridData">-->
<!--          <el-table-column property="date" label="日期" width="150"></el-table-column>-->
<!--          <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
<!--          <el-table-column property="address" label="地址"></el-table-column>-->
<!--        </el-table>-->
<!--      </el-dialog>-->
    <!--=========================== el-dialog end================================-->
  </div>

</template>

<script>
import formFiled from '@/components/form/index'
import breadcrumb from '@/components/breadcrumb'
import LbTable from '../../../components/lb-table/lb-table'

import mixinsCommon from './../mixins/common.js'
import OrdersListTable from '../components/OrdersListTable'

export default {
  mixins: [mixinsCommon],
  components: {
    formFiled,
    breadcrumb,
    LbTable,
    OrdersListTable
  },
  data () {
    return {
      columns: {
        type: 'afterOrder',
        height: '5000px',
        sortObj: {},
        config: [
          { type: 'selection', width: 50 },
          { prop: 'payTypeLabel', label: '商品名称', width: 150, slot: 'goods' },
          { prop: 'postName', label: '收货人', slot: 'contact' },
          { prop: 'postAddress', label: '收货地址', width: 150 },
          { prop: 'quantity', label: '数量', width: 50 },
          { label: '支付金额', slot: 'amount' },
          { prop: 'platformName', label: '平台' },
          { prop: 'afterSaleType', label: '售后类型' },
          { prop: 'lastAfterSubmitDate', label: '售后时间' }
        ]
      },
      loading: false,
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1, status: '' },
      breadcrumbConfig: {
        list: [
          {
            title: '订单管理',
            type: '#ff0000',
            path: ''
          },
          {
            title: '售后订单',
            type: '1',
            path: ''
          }
        ]
      },
      searchFormVal: {},
      searchFormConfig: {
        formconfig: {
          labeWidth: 100, // 表单宽度
          itemList: [// 表单的list
            { type: 'input', prop: 'orderNo', placeholder: '请输入订单编号', label: '订单编号', size: 'small' },
            { type: 'input', prop: 'postUserInfo', placeholder: '请输入收货人信息', label: '收货人信息', size: 'small' },
            {
              type: 'select',
              prop: 'platformId',
              placeholder: '请选择平台',
              label: '平台',
              size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            // {
            //   type: 'select', prop: 'shopId', placeholder: '请选择店铺名称', label: '店铺', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            // {
            //   type: 'select', prop: 'orderStatus', placeholder: '请选择订单状态', label: '订单状态', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            {
              type: 'select', prop: 'applierId', placeholder: '请选择跟进客服', label: '跟进客服', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'cascader', prop: 'orgCode', placeholder: '请选择公司部门', label: '公司部门', size: 'small', showAllLevels: false,
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2跟进客服' }]
            },
            // {
            //   type: 'select', prop: 'payType', placeholder: '请选择支付方式', label: '支付方式', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            // {
            //   type: 'select', prop: 'subsetStatus', placeholder: '请选择售后步骤', label: '售后步骤', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            { type: 'input', prop: 'refundNum', placeholder: '请输入售后编号', label: '售后编号', size: 'small' },
            // {
            //   type: 'select', prop: 'afterSaleReason', placeholder: '请选择售后原因', label: '售后原因', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            {
              type: 'select', prop: 'afterSalesType', placeholder: '请选择售后类型', label: '售后类型', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            { type: 'daterange', prop: 'orderTimeStart', placeholder: '请选择日期', label: '提交审核时间', size: 'small' }
          ],
          btnarry: [// 表单按钮
            { name: '查询', click: 'add', type: 'primary', plain: true, size: 'small' },
            { name: '重置', click: 'clrear', type: 'primary', plain: true, size: 'small' }
          ]
        },
        formData: { // 表单提交数据，
          pageNo: '', //	开始页数	body	false	integer(int32)
          pageSize: '' //	每页记录数	body	false	integer(int32)
          // orderNo: '', //	订单编号	body	false	string
          // postUserInfo: '', //	收货人信息	body	false	string
          // platformId: '', //	平台id（数据来源：/order/v1-2/platform/dataList）	body	false	integer(int64)
          // shopId: '', //	店铺id（数据来源：/order/v1-2/shop/dataList）	body	false	integer(int64)
          // orderStatus: '', //	订单状态（字典：order_main_subset_status）	body	false	string
          // applierId: '', //	跟进客服id（数据来源：/neworder/order/after/applierList）	body	false	integer(int64)
          // orgCode: '', //	部门id（数据来源：http://120.24.147.235:8087/sys/v1/org/tree/select）({"request":{"orgName":"","orgType":""},"version":""})	body	false	integer(int64)
          // payType: '', //	支付方式（字典：order_pay_type）1.在线支付（支付宝、微信）2.代收3.货到付款	body	false	string
          // afterSaleStatus: '', //	退换步骤（字典：after_sale_status）	body	false	string
          // refundNum: '', //	售后编号	body	false	string
          // createdTimeStart: '', //	提交时间-开始（格式：2022-03-11）	body	false	string
          // createdTimeEnd: '' //	提交时间-结束（格式：2022-03-21）	body	false	string
        }
      },
      activeName: 'goods'

      // columns: [
      //   { type: 'selection' },
      //   { label: '订单编号', prop: 'orderNo', minWidth: '170', align: 'left',
      //     render: (h, scope) => {
      //       return (
      //         <div >
      //           <el-tooltip
      //             class='item'
      //             effect='dark'
      //             content='单击复制'
      //             placement='top'
      //           >
      //             <p style='cursor:pointer' onClick={() => { this.copyInfo(scope.row) }}>{scope.row.orderNo}</p>
      //           </el-tooltip>
      //           <p class={scope.row.platformOrderNo ? 'info' : 'hide-content info'}>关联订单：{scope.row.platformOrderNo}</p>
      //         </div>
      //       )
      //     }
      //   },
      //   { label: '收货人', prop: 'postName', align: 'left', minWidth: '150',
      //     render: (h, scope) => {
      //       return (
      //         <div>
      //           <p>{scope.row.postName ? scope.row.postName : '-'}</p>
      //           <p>{scope.row.postContact ? scope.row.postContact : '-'}</p>

      //         </div>
      //       )
      //     }
      //   },

      //   { label: '收货地址', prop: 'postAddress', align: 'left', minWidth: '180' },
      //   { label: '下单时间', prop: 'submitDate', minWidth: '170', align: 'left' },
      //   { label: '商品名称', align: 'left', minWidth: '250',
      //     render: (h, scope) => {
      //       return (
      //         <div>
      //           <p title={scope.row.goodsName}>{scope.row.goodsName}</p>
      //         </div>
      //       )
      //     }
      //   },
      //   { label: '数量', prop: 'quantity' },
      //   { label: '平台', minWidth: '150', align: 'left',
      //     render: (h, scope) => {
      //       return (
      //         <div>
      //           <p>{scope.row.platformName ? scope.row.platformName : '-'}</p>
      //         </div>
      //       )
      //     } },
      //   // { label: '店铺', minWidth: '150', align: 'left',
      //   //   render: (h, scope) => {
      //   //     return (
      //   //       <div>
      //   //         <p>{scope.row.shopName ? scope.row.shopName : '-'}</p>
      //   //       </div>
      //   //     )
      //   //   } },
      //   { label: '跟进客服', prop: 'applierName', align: 'left', minWidth: '150' },
      //   { label: '支付金额', align: 'left', minWidth: '160',
      //     render: (h, scope) => {
      //       return (
      //         <div>
      //           <p>总价：￥{scope.row.totalAmount ? scope.row.totalAmount : '0'}</p>
      //           <p>已收：￥{scope.row.receivedAmount ? scope.row.receivedAmount : '0'}</p>
      //           <p>代收：￥{scope.row.collectionAmount ? scope.row.collectionAmount : '0'}</p>
      //         </div>
      //       )
      //     }
      //   },

      //   { label: '售后类型', prop: 'afterSaleType', align: 'left', minWidth: '150' },
      //   { label: '售后时间', prop: 'lastAfterSubmitDate', align: 'left', minWidth: '200' },
      //   {
      //     label: '操作',
      //     fixed: 'right',
      //     render: (h, scope) => {
      //       return (
      //         <div>
      //           <el-link type='primary' size='mini' type='primary' onClick={() => { this.toOtherPages(scope.row) }}>售后记录</el-link>
      //         </div>
      //       )
      //     }
      //   }]
    }
  },
  created () {
    this.initSearchList() // 初始化，搜索需要的列表数据
    this.fetchData()
  },
  watch: {
    platformDataList (val, oldVal) { // 平台
      val.forEach(item => {
        item.label = item.name
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '平台' })
      this.searchFormConfig.formconfig.itemList[index].option = val
    },
    /*
    shopDataList (val, oldVal) { // 店铺
      console.log(val)
      val.forEach(item => {
        item.label = item.name
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '店铺' })
      this.searchFormConfig.formconfig.itemList[index].option = val
    },
    */
    orgCodeList (val, oldVal) {
      val.forEach(item => {
        item.label = item.reallyName
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '公司部门' })
      this.searchFormConfig.formconfig.itemList[index].option = val
    },
    salesAuthority  (val, oldVal) { // 跟进客服
      val.forEach(item => {
        item.label = item.reallyName
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '跟进客服' })
      this.searchFormConfig.formconfig.itemList[index].option = val
    },
    dictionaries: {
      handler (newVal, oldVal) {
        // this.setSearchDictionaries('订单状态', 'after_sale_subset_status')
        // this.setSearchDictionaries('支付方式', 'order_pay_type')
        // this.setSearchDictionaries('售后原因', 'after_sale_reason')
        // this.setSearchDictionaries('售后步骤', 'after_sale_subset_status')
        this.setSearchDictionaries('售后类型', 'after_sale_status')
      },
      deep: true // 为true，表示深度监听
    }
  },
  methods: {
    // 复制
    copyInfo (row) {
      console.log(row, 'row')
      const that = this
      // let inline = this.line.find((res) => res.id == row.userDitch);
      const info =
 (row.orderNo == null ? '无' : row.orderNo)
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: 'success',
            message: '复制成功'
          })
        },
        function (e) {
          that.$message({
            type: 'warning',
            message: '复制失败'
          })
        }
      )
    },
    // 售后记录
    toOtherPages (e) {
      this.$router.push({ name: 'afterSaleRecordList', query: { orderNo: e.orderNo }})
    },
    // 接受表单组件的数据
    dialogClick (val, state) {
      this.searchFormVal = val
      // this.formFiledData = Object.assign(this.formFiledData, val)
      this.fetchData('search')
    },
    // 显示  dialog
    showDialog (title, type, row) {
      // console.log(title, type, row)
      this.dialog.type = type
      this.currentRow = row
    },
    fetchData (type) {
		this.loading = true;
      if (type === 'reset') {
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 10
        this.page.currentPage = 1
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (type === 'search') {
        const searchFormVal = this.searchFormVal
        params = Object.assign(params, searchFormVal)
        if (searchFormVal.orgCode) {
          params.orgCode = searchFormVal.orgCode[searchFormVal.orgCode.length - 1]
        }
        // 去除字符串 前后 空格
        for (const item in params) { if (typeof params[item] === 'string') { params[item] = params[item].trim() } }
        if (this.searchFormVal.orderTimeStart) {
          params.orderTimeStart = this.searchFormVal.orderTimeStart[0]
          params.orderTimeEnd = this.searchFormVal.orderTimeStart[1]
        }
      }
      this.$api.afterPageList(params).then((res) => {
        if (res.code === 0) {
          this.page.list = res.data.list
          console.log(this.page.list)
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
		this.loading = false;
      }).catch((err) => {
        console.log(err)
		this.loading = false;
      })
    },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.fetchData()
    },
    handleSizeChange (sizeChange) {
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.fetchData()
    },
    // 初始化，搜索需要的列表数据
    initSearchList () {
      const params = { pageNo: 1, pageSize: 1001 }
      this.getOrgTreeList() // 公司部门
      this.getSalesAuthority(params) // 跟进客服
      this.getPlatformDataList(params) // 平台
      this.getShopDataList(params) // 店铺
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-button {border: none;}
/deep/.el-table th > .cell, /deep/.el-table td{ text-align: unset;}

/deep/.el-select{
  border-left: none;
  border-right: none;
  input{
    border-left: 1px solid #d8dce5!important;
    border-right: 1px solid #d8dce5!important;
    border-radius: 5px!important;
  }
}

/deep/.el-table__row td .cell span, /deep/.el-table__row td .cell div p{
  display: block;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
/deep/ .hide-content {
  display: none !important;
}
/deep/.el-scrollbar{
  height:10px;
}
/deep/.el-scrollbar__bar.is-horizontal{
  height: 9px;

}
.page{
  text-align: center;
  margin: 10px auto;
}

.search-form {
  .el-form-item{
    max-width: 312px;
    /deep/ .el-form-item__label {
      width: 100px!important;
    }
    /deep/ .el-form-item__content {
      width: calc(100% - 100px);

      .el-date-editor {
        //width: calc(100% - 82px);
      }
    }

  }
}
</style>
